TestJsonController.java
package com.ch.ch7_2.controller;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.ch.ch7_2.model.Person;
@Controller
public class TestJsonController {
    /**
     * 进入视图页面
     */
    @GetMapping("/input")
    public String input() {
        return "input";
    }
    /**
     * 接收页面请求的JSON数据
     */
    @RequestMapping("/testJson")
    @ResponseBody
	/*@RestController注解相当于@ResponseBody ＋ @Controller合在一起的作用。
	①如果只是使用@RestController注解Controller，则Controller中的方法无法返回jsp页面或者html，返回的内容就是return的内容。
	②如果需要返回到指定页面，则需要用@Controller注解。如果需要返回JSON，XML或自定义mediaType内容到页面，则需要在对应的方法上加上@ResponseBody注解。
    */
    public List<Map<String, Object>> testJson(@RequestBody Person user) {
        //打印接收的JSON格式数据
        System.out.println("pname=" + user.getPname() +
                ", password=" + user.getPassword() + ",page=" + user.getPage());
        //返回Person对象
        //return user;
        /**ArrayList<Person> allp = new ArrayList<Person>();
         Person p1 = new Person();
         p1.setPname("陈恒1");
         p1.setPassword("123456");
         p1.setPage(80);
         allp.add(p1);
         Person p2 = new Person();
         p2.setPname("陈恒2");
         p2.setPassword("78910");
         p2.setPage(90);
         allp.add(p2);
         //返回ArrayList<Person>对象
         return allp;
         **/
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("pname", "陈恒2");
        map.put("password", "123456");
        map.put("page", 25);
        //返回一个Map<String, Object>对象
        //return map;
        //返回一个List<Map<String, Object>>对象
        List<Map<String, Object>> allp = new ArrayList<Map<String, Object>>();
        allp.add(map);
        Map<String, Object> map1 = new HashMap<String, Object>();
        map1.put("pname", "陈恒3");
        map1.put("password", "54321");
        map1.put("page", 55);
        allp.add(map1);
        return allp;
    }
}

实体，Model
Person.java

package com.ch.ch7_2.model;
import lombok.Data;
@Data
public class Person {
    private String pname;
    private String password;
    private Integer page;
}

html
input.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{css/bootstrap.min.css}" />
    <!-- 默认访问 src/main/resources/static下的css文件夹-->
    <!-- 引入jQuery -->
    <script type="text/javascript" th:src="@{js/jquery-3.6.0.min.js}"></script>
    <script type="text/javascript">
        function testJson() {
            //获取输入的值pname为id
            var pname = $("#pname").val();
            var password = $("#password").val();
            var page = $("#page").val();
            alert(password);
            $.ajax({
                //发送请求的URL字符串
                url : "testJson",
                //定义回调响应的数据格式为JSON字符串，该属性可以省略
                dataType : "json",
                //请求类型
                type : "post",
                //定义发送请求的数据格式为JSON字符串
                contentType : "application/json",
                //data表示发送的数据
                data : JSON.stringify({pname:pname,password:password,page:page}),
                //成功响应的结果
                success : function(data){
                    if(data != null){
                        //返回一个Person对象
                        //alert("输入的用户名:" + data.pname + "，密码：" + data.password +
//"，年龄：" +  data.page);
                        //ArrayList<Person>对象
                        /**for(var i = 0; i < data.length; i++){
                         alert(data[i].pname);
                         }**/
                        //返回一个Map<String, Object>对象
                        //alert(data.pname);//pname为key
                        //返回一个List<Map<String, Object>>对象
                        for(var i = 0; i < data.length; i++){
                            alert(data[i].pname);
                        }
                    }
                },
                //请求出错
                error:function(){
                    alert("数据发送失败");
                }
            });
        }
    </script>
</head>
<body>
<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">处理JSON数据</h3>
    </div>
</div>
<div class="container">
    <div>
        <h4>添加用户</h4>
    </div>
    <div class="row">
        <div class="col-md-6 col-sm-6">
            <form class="form-horizontal" action="">
                <div class="form-group">
                    <div class="input-group col-md-6">
							<span class="input-group-addon">
								<i class="glyphicon glyphicon-pencil"></i>
							</span>
                        <input class="form-control" type="text"
                               id="pname" th:placeholder="请输入用户名"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group col-md-6">
							<span class="input-group-addon">
								<i class="glyphicon glyphicon-pencil"></i>
							</span>
                        <input class="form-control" type="password"
                               id="password" th:placeholder="请输入密码"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group col-md-6">
							<span class="input-group-addon">
								<i class="glyphicon glyphicon-pencil"></i>
							</span>
                        <input class="form-control" type="text"
                               id="page" th:placeholder="请输入年龄"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-6">
                        <div class="btn-group btn-group-justified">
                            <div class="btn-group">
                                <button type="button" onclick="testJson()"
                                        class="btn btn-success">
                                    <span class="glyphicon glyphicon-share"></span>
                                    &nbsp;测试
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>
